<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		<view class="page-list-tabs">
			<my-tabs :list="type" :lineColor="$s.theme" keyName="type_name" itemStyle="height:68rpx;padding:0 38rpx;" :scrollable="false" @click="tabSelect" :current="tab_index" :activeStyle="{color: $s.theme}"></my-tabs>
		</view>
		
		<block v-for="(data,index) in type" :key="index">
			<view class="page-list" v-if="index===tab_index">
				<block v-for="(val,index2) in list[index]" :key="index2">
				<mars-new-item :item="val" path="/pages/articles/detail/index?id="></mars-new-item>
				</block>
			</view>
		</block>
		<u-loadmore :status="loading_status" :line="true" :loading-text="loading_text" :loadmore-text="loadmore_text" :nomore-text="nomore_text" marginTop="20"/>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	export default {
		data() {
			return {
				nav_title:'常见问题',
				tab_index:0,
				tab_id:0,
				nodata:false,
				loading_status:'loadmore',
				loading_text: '努力加载中',
				loadmore_text: '轻轻上拉',
				nomore_text: '实在没有了',
				list:[],
				type:[],
				page_no:[],
				page_count:[],
			}
		},
		onLoad(){
			
		},
		onShow(){
			this.initData()
		},
		computed:{
			...mapState({
				$s:state => state.$style,
			}),
		},
		methods: {
			initData(){
				let self=this
				this.$u.api.articlesType().then(res=>{
					this.type=res.data
					self.tabChange(0)
				})
			},
			//主动选择tab
			tabSelect(item){				
				this.tab_index=item.index
				this.tab_id=item.id
				this.getList()
			},
			//改变TAB
			tabChange(i){
				this.tab_index=i
				this.tab_id=this.type[i].id
				this.getList()
			},
			//获取列表
			getList(){				
				this.loading_status="loading"
				let index=this.tab_index
				let id=this.tab_id
				let page=this.page_no[index] || 1
				let count=this.page_count[index] || 1
				let selft=this
				let limit=10
				if(page>count){			//最后一页
					this.loading_status="nomore"
				}else{
					this.$u.api.articlesList({type_id:id,page:page,limit:limit}).then(res=>{
						if(page===1){
							this.list[index]=[]
							this.list[index]=res.data.list
						}else{
							this.list[index]=this.list[index].concat(res.data.list)
						}
						//改变状态
						this.loading_status=page>=res.data.count?'nomore':'loadmore'
						
						this.page_no[index]=res.page+1
						this.page_count[index]=res.count
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $u-bg-color;
	}
	.page-list {
	    padding-bottom: 0!important;
	    background: #f5f5f5;
	}
	
	.page-list-tabs{
		padding-bottom: 15rpx;
		background-color: #FFFFFF;
	}
	
	.page-list{
		margin-top: 20rpx;
	}
</style>
